<template>
  <div class="naviga">
    <div class="naviga-img">
      <a href="javascript:">
        <img :src="naviga.navigaimg" />
      </a>
    </div>
    <div class="naviga-sort">
      <ul>
        <li v-for="item in naviga.navigasortlist"><a href="javascript:">{{item.sortname}}</a></li>
      </ul>
    </div>
    <div class="naviga-lookup">
      <form>
          <input type="text" placeholder="" class="text"/>
          <div class="select">
            <button>
              <img src="../assets/sou.png"/>
            </button>
          </div>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        naviga: {
          navigaimg:"//s02.mifile.cn/assets/static/image/mi-logo.png",
          navigasortlist: [{
              sortname: "小米手机"
            },
            {
              sortname: "Redmin 红米"
            },
            {
              sortname: "Redmin 红米"
            },
            {
              sortname: "电视"
            },
            {
              sortname: "笔记本"
            },
            {
              sortname: "家电"
            },
            {
              sortname: "路由器"
            },
            {
              sortname: "智能硬件"
            },
            {
              sortname: "服务"
            },
            {
              sortname: "社区"
            }
          ]
        }
      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style scoped="scoped">
  .naviga {
    position: relative;
    height: 7.5rem;
  }

  .naviga .naviga-img {
    position: absolute;
    top: 1.3125rem;
    left: 10.625rem;
  }

  .naviga .naviga-img a {
    display: block;
    width: 4.7rem;
    height: 4.7rem;
    background-color: #ff6700;
  }

  .naviga .naviga-img a img {
    display: block;
    padding-top: 0.425rem;
    margin: 0 auto;

  }

  .naviga .naviga-sort {
    position: absolute;
    top: 3.0625rem;
    left: 25rem;
  }

  .naviga .naviga-sort ul li {
    float: left;
    margin-right: 1.2rem;
  }

  .naviga .naviga-sort ul li a {
    display: block;
    font-size: 16px;
    color: #333;
  }

  .naviga .naviga-sort ul li a:hover {
    color: #ff6700;
  }

  .naviga .naviga-lookup {

    position: absolute;
    top: 2.0625rem;
    right: 9.25rem;
  }

  .naviga .naviga-lookup form {
    width: 25.5rem;
    /* height: 3.125rem; */
    position: relative;
  }
  .naviga .naviga-lookup form  .text{

    width: 15.3125rem;
    height: 3.125rem;
    outline: 0;
    margin-left: 4rem;
  }
   .naviga .naviga-lookup form .select{

     position: absolute;
     top: 0rem;
     right: 1.3rem;
   }
   .naviga .naviga-lookup form .select button{
     display: block;
     width: 4.45rem;
     height: 3.55rem;
     background-color: #FFFFFF;
   }
   .naviga .naviga-lookup form .select button img{
     max-width: 100%;
   }
</style>
